<template>
    <l-page>
        <l-navbar title="指尖评估" />
        <u-image :src="$imgUrl + '600/200'" width="100%" height="150"></u-image>
        <view class="bg-white p-3 grid grid-cols-2 gap-3">
            <navigator class="nav-item" url="/pages/inquiry/inquiry">
                <u-image :src="$imgUrl + 36" radius="3" width="36" height="36"></u-image>
                <view class="ml-2">
                    <view class="text-blue-500 text-lg font-bold">询口价</view>
                    <view class="text-gray-400 text-xs">在线生成评估结果</view>
                </view>
            </navigator>
            <navigator class="nav-item" url="/pages/estimate/apply">
                <u-image :src="$imgUrl + 36" radius="3" width="36" height="36"></u-image>
                <view class="ml-2">
                    <view class="text-blue-500 text-lg font-bold">评估申请</view>
                    <view class="text-gray-400 text-xs">提交到人工评估转岗</view>
                </view>
            </navigator>
        </view>
        <view class="panel">
            <view class="flex justify-between items-center">
                <view class="text-lg">
                    实时行情
                </view>
                <view class="w-40">
                    <u-search placeholder="请输入城市" :showAction="false"></u-search>
                </view>
            </view>
            <view class="flex justify-between text-center mt-3">
                <view>
                    <view class="text-gray-400">最新均价</view>
                    <view class="text-lg">元/M²</view>
                </view>
                <view>
                    <view class="text-gray-400">环比</view>
                    <view class="text-lg">%</view>
                </view>
                <view>
                    <view class="text-gray-400">同比</view>
                    <view class="text-lg">%</view>
                </view>
            </view>
            <view class="h-[200px]">
                <!-- <qiun-data-charts canvasId="chat" id="chat" type="line" ontouch canvas2d :opts="opts"
                    :chartData="chartData" /> -->
            </view>
        </view>
    </l-page>
</template>
<script setup lang="ts">
// import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
import { ref } from 'vue';
let opts = {
    padding: [15, 10, 0, 15],
    dataLabel: false,
    dataPointShape: false,
    enableScroll: true,
    legend: {},
    xAxis: {
        disableGrid: true,
        itemCount: 10,
        scrollAlign: 'right'
    },
    yAxis: {
        gridType: "dash",
        dashLength: 2,
        showTitle: true,
        data: [{
            title: '报盘均价（元/m²）',
            titleFontSize: 10,
            titleOffsetX: 20
        }]
    },
    extra: {
        line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
        }
    }
}
let a = [], b = []
for (let i = 0; i < 100; i++) {
    a.push((Math.random() * 10).toFixed(2))
    b.push((Math.random() * 10).toFixed(2))
}
let res = {
    categories: a,
    series: [
        {
            name: "成交价",
            linearColor: [
                [
                    0,
                    "#1890FF"
                ],
                [
                    0.25,
                    "#00B5FF"
                ],
                [
                    0.5,
                    "#00D1ED"
                ],
                [
                    0.75,
                    "#00E6BB"
                ],
                [
                    1,
                    "#90F489"
                ]
            ],
            setShadow: [
                3,
                8,
                10,
                "#1890FF"
            ],
            data: b
        }]
}
let chartData = ref({})
setTimeout(() => chartData.value = res, 1000)
</script>
<style lang="scss" scoped>
.nav-item {
    background: url($imgUrl+'140/40') no-repeat center/100% 100%;
    @apply flex items-center p-2 shadow rounded;
    text-shadow: 2px 2px 2px #000;

    :deep(.u-image) {
        @apply shadow;

    }
}
</style>